import React, { useEffect, useRef } from "react";
import DPlayer, { DPlayerOptions } from "dplayer";
import { Box } from "@mui/system";
import { ViewerCommonProps } from "../../FileViewer";
export interface ExtendVideoViewerProps
  extends ViewerCommonProps,
    Omit<DPlayerOptions, "container"> {}
const Viewer = ({ onClose, src, ...otr }: ExtendVideoViewerProps) => {
  const ref = useRef(null);
  const videoInstance = useRef<DPlayer>();
  useEffect(() => {
    if (src) {
      videoInstance.current = new DPlayer({ container: ref.current, video: { url: src } });
      return () => {
        videoInstance.current?.destroy();
      };
    }
  }, [src]);
  return (
    <Box onClick={onClose} sx={{ height: "100vh", display: "flex", alignItems: "center" }}>
      <Box
        ref={ref}
        onClick={(e) => {
          e.stopPropagation();
        }}
        sx={{ height: "30%", flexFlow: 1 }}
      ></Box>
    </Box>
  );
};

export default Viewer;
